<template>
  <div id="map"></div>
</template>

<script setup >
import * as echarts from "echarts";
import chinaJSON from "@/assets/china.json";
import { onMounted } from "vue";

onMounted(() => {
  drawMap();
});
const drawMap = () => {
  let mapChart = echarts.getInstanceByDom(document.getElementById("map"));
  if (mapChart != null && mapChart != "" && mapChart != undefined) {
    mapChart.dispose();
  }
  mapChart = echarts.init(document.getElementById("map"));

  let uploadDataUrl = chinaJSON;
  // 注册地图
  echarts.registerMap("china", uploadDataUrl);
  let dataValue = dealWithData();
  let option = {
    geo: {
      // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
      map: "china",
      aspectScale: 0.75,
      zoom: 1.1,
      label: {
        show: true,
      },
      zoom: 1.7,
      roam: true,
      itemStyle: {
        normal: {
          borderWidth: 1, //边际线大小
          borderColor: "#fff", //边界线颜色
          areaColor: "rgba(68, 206, 246, 0.5)", //默认区域颜色
        },
        emphasis: {
          show: true,
          areaColor: "#3066ba", //鼠标滑过区域颜色
          label: {
            show: true,
            textStyle: {
              color: "#fff", //鼠标经过字体颜色
            },
          },
        },
      },
    },
    tooltip: {
      formatter(params) {
        return `地区：${params.name}</br>数值：${params.value[2]}`;
      },
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: dataValue,
        label: {
          normal: {
            show: false,
          },
          textStyle: {
            color: "#1DE9B6",
          },
          emphasis: {
            textStyle: {
              color: "rgb(183, 185, 14)",
            },
          },
        },
        zoom: 1.1,
        map: "china",
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        zlevel: 1,
      },
      // 地图的线路图动画效果相关设置
      {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.6,
          symbol: "arrow",
          symbolSize: 7,
        },
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.1,
            curveness: 0.3,
          },
        },
        data: [],
      },
    ],
  };
  mapChart && mapChart.setOption(option);
};

const dealWithData = () => {
  var geoCoordMap = {
    海门: [121.15, 31.89],
    鄂尔多斯: [109.781327, 39.608266],
    招远: [120.38, 37.35, 24],
    舟山: [122.207216, 29.985295],
    齐齐哈尔: [123.97, 47.33],
    盐城: [120.13, 33.38],
    赤峰: [118.87, 42.28],
    青岛: [120.33, 36.07],
    乳山: [121.52, 36.89],
    金昌: [102.188043, 38.520089],
    泉州: [118.58, 24.93],
    莱西: [120.53, 36.86],
    日照: [119.46, 35.42],
    胶南: [119.97, 35.88],
    南通: [121.05, 32.08],
    拉萨: [91.11, 29.97],
    葫芦岛: [120.836932, 40.711052],
    常熟: [120.74, 31.64],
    东莞: [113.75, 23.04],
    河源: [114.68, 23.73],
    淮安: [119.15, 33.5],
    泰州: [119.9, 32.49],
    南宁: [108.33, 22.84],
    营口: [122.18, 40.65],
    惠州: [114.4, 23.09],
    江阴: [120.26, 31.91],
    蓬莱: [120.75, 37.8],
    韶关: [113.62, 24.84],
    嘉峪关: [98.289152, 39.77313],
    广州: [113.23, 23.16],
    延安: [109.47, 36.6],
    太原: [112.53, 37.87],
    清远: [113.01, 23.7],
    中山: [113.38, 22.52],
    昆明: [102.73, 25.04],
    银川: [106.27, 38.47],
    张家港: [120.555821, 31.875428],
    三门峡: [111.19, 34.76],
    锦州: [121.15, 41.13],
    南昌: [115.89, 28.68],
    柳州: [109.4, 24.33],
    三亚: [109.511909, 18.252847],
    自贡: [104.778442, 29.33903],
    吉林: [126.57, 43.87],
    阳江: [111.95, 21.85],
    泸州: [105.39, 28.91],
    西宁: [101.74, 36.56],
    宜宾: [104.56, 29.77],
    呼和浩特: [111.65, 40.82],
    成都: [104.06, 30.67],
    大同: [113.3, 40.12],
    本溪: [123.73, 41.3],
  };
  var data = [];
  for (var key in geoCoordMap) {
    geoCoordMap[key][2] = Math.ceil(Math.random() * 1000 - 1);
    data.push({ name: key, value: geoCoordMap[key] });
  }
  return data;
};
</script>

<style lang='scss' scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
